<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas课堂练习</title>
	</head>
	<body>
		<img src="img/header.jpg" alt="" id="header">
		<canvas  id="myCanvas" width="500" height="500" style="border: solid 1px #ccc;"></canvas>
	<script>
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.fillStyle = "red";
		ctx.strokeStyle = "blue"
		// ctx.fillRect(10,80,70,50);
		ctx.fillRect(115,115,115,115)
		ctx.strokeRect(270,110,150,150);
		ctx.arc(205,50,40,0,2*Math.PI);
		ctx.stroke();
		var grd=ctx.createLinearGradient(0,0,200,0);
		grd.addColorStop(0,"red");
		grd.addColorStop(1,"white");
		ctx.fillStyle=grd;
		ctx.fillRect(10,10,150,80);
		var img=document.getElementById("header");
		img.onload = function() {
			ctx.drawImage(img,280,10);
		} 
		ctx.moveTo(0,0);
		ctx.lineTo(100,100);
		ctx.stroke();
	</script>
	</body>
</html>